<template>
	<view class="page_content">
		<view class="page_step">
			<uni-section>
				<uni-steps :options="list1" :active="active" activeColor="#3cb371" />
			</uni-section>
		</view>
		<view>
			<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
				:direction="direction" @trigger="trigger" />
		</view>
		<uni-section :title="item.title+' '+(index+1)" type="line" class="page_sp" v-for="(item,index) in dynamicLists"
			:key="item.id" required :rules="item.rules" :name="'domains[' + item.id + ']'" longpress="del(item.id)">
			<view>
				<!-- 商品信息 -->
				<uni-forms ref="spForm" :modelValue="spFormData">
					<uni-forms-item label="商品名称" required name="spName">
						<uni-easyinput v-model="spFormData.spName" placeholder="请输入商品名称" />
					</uni-forms-item>
					<uni-forms-item label="商品数量" required name="spNum">
						<uni-number-box :step="1" v-model="spFormData.spNum" :min="0" :max="999" />
						<!-- <uni- v-model="spFormData.spNum" placeholder="请输入商品数量" /> -->
					</uni-forms-item>
					<view>
						<label style="font-size: 14px;color: #8F939C;">相关产地证明，</label>
						<label style="font-size: 14px;color: #E43D33;margin-bottom: auto;">48小时核酸证明等</label>
					</view>
					<uni-forms-item required name="imageValue">
						<uni-file-picker v-model="spFormData.imageValue" fileMediatype="image" mode="grid" :limit="6"
							@select="select" @progress="progress" @success="success" @fail="fail" />
					</uni-forms-item>
					<button class="spForm-button" size="mini" type="default" @click="del(item.id)">删除</button>
				</uni-forms>
			</view>
		</uni-section>
		<button type="primary" size="mini" @click="addsp" class="addsp">添加商品</button>
		<view class="button-group">
			<button type="primary" size="mini" @click="change">上一步</button>
			<button type="primary" size="mini" @click="submit">提交</button>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				active: 1,
				list1: [{
					title: '运输信息'
				}, {
					title: '商品信息'
				}, {
					title: '完成'
				}],

				//商品信息
				spFormData: {
					spName: '',
					spNum: 0,
					imageValue: []
				},
				dynamicFormData: {
					domains: {}
				},
				dynamicLists: [{
					title: '商品',
					id:1
				}
				],
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'vertical',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#f0f0f0',
					selectedColor: '#3cb371',
					buttonColor: '#3cb371',
					iconColor: '#fff'
				},
				content: [{
						iconPath: '/static/main.png',
						selectedIconPath: '/static/main.png',
						text: '我的',
						active: false
					},
					{
						iconPath: '/static/remarks.png',
						selectedIconPath: '/static/remarks.png',
						text: '首页',
						active: false
					}
				]
			}
		},
		onLoad: (option) => {
			let res = decodeURIComponent(option.res);
			console.log("option", res);
		},
		onBackPress() {
			if (this.$refs.fab.isShow) {
				this.$refs.fab.close()
				return true
			}
			return false
		},
		methods: {
			change() {
				uni.navigateBack({
					delta: 1
				})
			},
			submit() {
				uni.navigateTo({
					url: './gs-step3'
				})
			},
			addsp() {
				this.dynamicLists.push({
					title: '商品',
					rules: [{
						'required': true,
						errorMessage: '商品信息必填'
					}],
					id: Date.now()
				})
			},
			del(id) {
				let index = this.dynamicLists.findIndex(v => v.id === id)
				this.dynamicLists.splice(index, 1)
			},
			trigger(e) {
				console.log(e)
				// this.content[e.index].active = !e.item.active
				uni.showModal({
					title: '提示',
					content: `确定跳转到${e.item.text}?`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							if(e.item.text == '首页'){
								uni.switchTab({
									url: '/pages/index/index'
								});
							}else if(e.item.text == '我的'){
								uni.switchTab({
									url: '/pages/profile/profile'
								});
							}
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// fabClick() {
			// 	uni.showToast({
			// 		title: '点击了悬浮按钮',
			// 		icon: 'none'
			// 	})
			// },
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		background-color: #f0f0f0;
	}

	.page_content {
		.button-group {
			margin-top: 15px;
			margin-bottom: 40px;
			display: flex;
			justify-content: space-around;

			button {
				width: 180px;
				height: 35px;
				padding-top: 5px;
				background-color: #3cb371;
			}
		}
	}

	.page_step {
		border: 2rpx solid #F2F2F2;
		border-radius: 10rpx;
		padding: 10px;
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
		background-color: #ffffff;
		box-shadow: 0 0 15px #cccccc;
	}

	.page_sp {
		border: 2rpx solid #F2F2F2;
		border-radius: 10rpx;
		padding: 10px;
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
		background-color: #ffffff;
		box-shadow: 0 0 15px #cccccc;
		.spForm-button {
			background-color: #ffffff;
			color: #ffaa00;
			position:relative;
			left:82%;
		}
	}

	.addsp {
		width: 96%;
		height: 35px;
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 40px;
		background-color: #ffaa00;
	}
</style>
